// ===============================设置图片裁切区域======================
// 取裁剪区域的 DOM 元素
let $image = $(".container img");
//配置选项
let options = {
  // 纵横比
  aspectRatio: 1,
  // 指定预览区域
  preview: ".preview",
}
//创建裁剪区域
$image.cropper(options)


// ============================模拟点击文件域选择文件========================
// 点击选择图片按钮时模拟点击文件域（文本域是隐藏的，用户不需要看到）
$('#btnChooseImage').on('click', function () {
  $('#file').click()
})


// ===========================更换图片重新设置裁切区域========================
/* 在做图片上传功能时，给input绑定了change事件，第一次点击input框时，
在打开的文件选择框里点击取消按钮，不会触发change事件。但是当已经上传了图片，
再次点击input，在文件选择弹窗里，点击取消按钮，会再次触发input的change事件。 */
const layer = layui.layer
// 当选择的文件变更时触发change事件
$('#file').on('change', function () {
  // 使用DOM对象文件域的files属性获取到图片文件对象数组，再用下标获取其中元素
  const imgFile = this.files[0]
  // 用户点击了文件域但是最终未选择文件，imgFile的值是undefined，使用下方转链接的方法会报错
  // 所以先判断如果未选择文件就return，后续代码不执行并提示用户

  // 此处也可以判断文件域的value是否为空，this.files的长度是否为0
  // 如果需要选择同一个文件之后，还会再触发change事件的解决办法是在文件上传成功后，把input的value清空。
  if (!imgFile) return layer.msg('未选择图片')
  // 将图片文件对象转成url链接
  const imgSrc = URL.createObjectURL(imgFile)
  $image
    // 销毁旧的裁剪区域
    .cropper('destroy')
    // 重新设置图片路径
    .attr('src', imgSrc)
    // 重新初始化裁剪区域
    .cropper(options)
})

// ===========================上传新头像=========================
$('#btnCreateAvatar').click(function () {
  // 剪裁得到一张图片（canvas图片）
  const canvasObj = $image.cropper('getCroppedCanvas', {
    width: 100,
    height: 100
  })

  // 把canvas图片转成base64格式的字符串
  const base64Str = canvasObj.toDataURL('image/png')
  //base64Str中含有特殊字符需要编码后发请求更新头像
  axios
    .post('/my/update/avatar', `avatar=${encodeURIComponent(base64Str)}`)
    .then((res) => { console.log(res) })
  // 请求更新头像成功后调用父页面的方法重新渲染头像
  window.parent.getUserInfo()
})
